import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { withRouter } from "react-router-dom";
import { Tabs, Tools, Avatar } from "weaver-mobile";
import { ListViewPage } from "weaver-mobile-page";
import { renderLoading, renderNoData } from "../../public";
import BackTop from "../../../public/back-to-top";
import * as CoworkUtil from "../../../util";

const getLabel = Tools.getLabel;

@withRouter
@inject("communicationStore")
@observer
export default class DetailParticipation extends Component {
  constructor(props) {
    super(props);
    this.prefixCls = "cowork-detail-participation";
    this.state = {
      tabs: [],
      currentTab: "",
    };
  }

  componentDidMount() {
    const {
      communicationStore: { detailParticipationStore, detailStore },
      location: { pathname },
    } = this.props;
    const {
      getListDatas,
      setStoreState,
      getCountDatas,
    } = detailParticipationStore;
    // 获取地址参数： 定位当前TAB页
    let currentTab = this.getLocationSearchParams(this.props);
    // 数量请求
    getCountDatas({ coworkid: detailStore.coworkId }).then((res) => {
      // 获取TAB数据
      const tabs = this.getTopTabs(res);
      // 要保证TAB数据存在的情况下在定位当前TAB
      this.setState({ tabs }, () => this.setState({ currentTab }));
    });
    // Path
    setStoreState({ path: pathname });
    // 更改页面Title
    CoworkUtil.TitleUtil.setTitle("参与情况");
    // 列表数据请求
    getListDatas({ coworkid: detailStore.coworkId }, pathname, currentTab);
  }

  componentWillUnmount() {
    // 还原页面Title
    CoworkUtil.TitleUtil.setTitle();
  }

  getLocationSearchParams = (props) => {
    const {
      location: { search },
    } = props || this.props;
    let currentTab = "";
    if (search) {
      const params = new URLSearchParams(search);
      currentTab = params.get("type");
    }
    return currentTab;
  };

  getTopTabs = (res) => {
    const tabs = [];
    const cardInfo = [
      { key: "parter", title: getLabel(17689, "参与者"), color: "#00C7FF" },
      { key: "unread", title: getLabel(18007, "未查看"), color: "#FF2E3D" },
      { key: "quiter", title: getLabel("524324", "已退出"), color: "#DC2EFF" },
    ];
    cardInfo.forEach((item) => {
      const key = item.key;
      const tab = (
        <div className={`${this.prefixCls}-tab`}>
          <div
            className={`${this.prefixCls}-tab-num`}
            style={{ color: item.color }}
          >
            {res[`${item.key}Count`] || 0}
          </div>
          <div style={{ color: "#868686" }}>{item.title}</div>
        </div>
      );
      tabs.push({ key, title: tab });
    });

    return tabs;
  };

  onTabChange = (tab) => {
    const {
      communicationStore: { detailParticipationStore, detailStore },
    } = this.props;
    const { getListDatas } = detailParticipationStore;
    if (tab.key) {
      this.setState({ currentTab: tab.key });
      getListDatas({ coworkid: detailStore.coworkId }, "", tab.key);
    }
  };

  onRowClick = (data) => {
    CoworkUtil.openHrmCard(data.id);
  };

  getTemplate = () => {
    const newTemp = {
      default: [
        {
          key: "col_1",
          render: (data) => (
            <div key={data.id} className={`${this.prefixCls}-list-line`}>
              <div className={`${this.prefixCls}-list-line-avatar`}>
                <Avatar userId={data.id} />
              </div>
              <div className={`${this.prefixCls}-list-line-userinfo`}>
                {data.lastname || ""}
                <div className="departmentinfo">
                  <span>{data.departmentidspan || ""}</span>
                  <span>{data.jobtitlespan || ""}</span>
                </div>
              </div>
            </div>
          ),
        },
      ],
    };
    return newTemp;
  };

  render() {
    const { tabs, currentTab } = this.state;
    const {
      communicationStore: { detailParticipationStore },
    } = this.props;
    const { participationList, listLoading } = detailParticipationStore;
    let child = null;
    if (listLoading) child = renderLoading;
    if (participationList && !listLoading && !participationList.data.length)
      child = renderNoData;
    else
      child = (
        <ListViewPage.Normal
          className={`${this.prefixCls}-list`}
          store={participationList}
          getTemplate={this.getTemplate}
          onRowClick={this.onRowClick}
          customHeight="100%"
        />
      );
    return (
      <div className={this.prefixCls}>
        <BackTop
          visibilityHeight="200"
          modal
          useQuery
          target={`.am-tabs-pane-wrap-active .${this.prefixCls}-list`}
        >
          <Tabs
            className={`${this.prefixCls}-tabs`}
            tabs={tabs}
            page={currentTab}
            onChange={this.onTabChange}
            renderTabBar={(props) => <Tabs.ExpandTabBar {...props} />}
          >
            {child}
          </Tabs>
        </BackTop>
      </div>
    );
  }
}
